// --------------------------------------------------white
// YOUR BEST PRICES		Agosto 2013																
// Global less
// --------------------------------------------------

// INDICE
// --------------------------------------------------
// GLOBAL
// HEADER
// NAV BUTTONS
// MAIN
// FOOTER
// PRODUCT CONTAINER
// PRODUCT DETAIL
// COMMENT
// REGISTER
// MODAL

// GLOBAL
body {
	background: @white;
	padding-top: 85px!important;
	.Robo-R;

	.loginOn {
		padding-top: 25px;
	}
}

.container {
	position: relative;
	height: auto;
	padding-bottom: 160px;
	min-height: 558px;
	margin-bottom: -22px;
}

h2 {
	margin:0;
	font-size: 1.500em;
	color: @fourth;
	.Miso-R;
}

h3 {
	margin:0;
	font-size: 1.35em;
	color: @third;
	.Robo-R;
}

p {
	font-size: 1.250em;
	color: @fourth;
	.Robo-R;
}

li {
	list-style: none;					
}

a {
	color: @product;
	.Robo-L;
	&:hover {
		color: @fourth;
	}
}

.txtC {
	text-align: center;
}

.alert {
	border-radius: 0px;
	margin-top: 10px;
	&.alert-danger {
		color: @white;
		background-color: #b94a48;
		border-color: #611413;
	}
	&.alert-success {
		color: @white;
		background-color: @product;
	}
}

.error {
	//.alert;
	//.alert-danger;
	color: @create;
	padding: 5px;
	margin: 0!important;
}

.row {
	margin-left: 0;
	margin-right: 0;
}

.form-control {
	border-radius: 0px!important;
	border: 1px solid @second;
	color: @third;
	background: transparent;
	box-shadow: none!important;
	//box-shadow: 0 -2px 0px rgba(0, 0, 0, 0.05) inset!important;
	.form-control-focus (@third);
	&:-webkit-autofill {
		border: 1px solid @product;
		color: @third;
		background: transparent;
        -webkit-box-shadow: 0 0 0px 1000px @white inset;
    }
}

.btn {
	.Robo-L;
	margin-left: 5px!important;

	&[disabled] {
		background: @create;
		text-decoration: line-through;
	}

	&:first-child {
		margin-left: 0px!important;
	}

}

.btn-default {
	border-radius: 3px!important;
	border-color: darken(@shop, 20%);
	background: darken(@shop, 20%);
	padding: 6px 28px!important;
	color: @white;
	
	&:hover {
		color: @fourth;
		i {
			color: @fourth!important;
		}
	}
}

.btn-danger {
	border-radius: 3px!important;
	padding: 6px 28px!important;
	border-color: @btn-danger-bg;
}

.btn-link {
	color: @product;
	&:hover {
		color: @fourth;
	}
}

.pagination {
	li {
		a {
			border-radius: 3px!important;
			background: @fourth;
			padding: 6px 28px!important;
			color: @white;
			&:hover {
				color: @fourth;
				i {
					color: @fourth!important;
				}
			}
			&.active {
				background: @third;
				color: @white;
			}
		}		
	}
}

.label-info {
	background-color: @product!important;
}

.well {
	background-color: #fff;
	border-radius: 0px;
	border-color: @social;
}

.noPadding {
	padding: 0px;
}

// HEADER
// --------------------------------------------------
.headerContainer {
	background: @white;
	position: fixed;
	width: 100%;
	max-height: 86px;
	height: auto;
	overflow: hidden;
	top: 0;
	z-index: 999;

	.container {
		min-height: 0;
		max-height: 86px;
		height: auto;
		padding-bottom: 0px;
		margin-bottom: 0px;
	}

	.topbar {
		max-height: 64px;
		height: auto;
		overflow: hidden;
	}
}

.navbar-brand {
	padding: 0;
}
.logo {
	width: 161px;
	height: 54px;
	margin: 5px 40px 2px 30px;
	cursor: pointer;
	.background ('latiendasustentable_white.jpg');
	span {
		text-indent: -99999px;
		display: inline-block;
		width: 0;
		height: 0;
	}
	&.en {
		.background ('latiendasustentable_.png');
	}
}

.inSystem {	
	background: @product;
	width: 100%;
	height: auto;
	min-height: 3px;
	max-height: 22px;
	overflow: hidden;

	.user {
		max-height: 22px;
		margin-right: 25px;
		overflow: hidden;

		h6 {
			margin: 0;
			padding: 2px 0;
			color: @gray!important;
			float: left;
			font-size: 1.1em;
			.Robo-R;
		}
		a {
			position: relative;
			float: left;
			display: block;
			padding-left: 40px;
			color: @gray;
			font-size: 1.1em;
			.Robo-R;

			&:before {
				position: absolute;
			    content: ">";
			    width:22px;
			    height:22px;
			    top: -28px;
				left: 11px;
			    color: @gray;
				font-size: 3.5em;
				.Miso-L;
			}

			&:after {
				position: absolute;
			    content: ">";
			    width:22px;
			    height:22px;
			    top: -28px;
				left: 12px;
			    color: @product;
				font-size: 3.5em;
				.Miso-L;
			}
		}
	}

	h6 {
		margin-top: 0;
		padding: 5px 10px;
		text-align: left;	
	}
}

.badge {
	padding: 4px;
	font-size: 9px;
	font-weight: normal;
	margin-bottom: 2px;
	vertical-align: text-bottom;
	display: none;
	cursor: pointer;

	&.badge-comment {
		background: white;
		color: @product;
	}

	&.badge-sale {
		background: @shop;
	}

	&.active {
		display: inline-block;
		cursor: poninter;
	}
}

.lg_es {
	width: 23px;
	height: 23px;
	display: inline-block;
	background: url('@{image}es.png') 0 0 no-repeat;
	&.on {
		background: url('@{image}es.png') 0 -23px no-repeat;
	}
}

.lg_en {
	width: 23px;
	height: 23px;
	display: inline-block;
	background: url('@{image}en.png') 0 0 no-repeat;
	&.on {
		background: url('@{image}en.png') 0 -23px no-repeat;
	}
}

// NAV BUTTONS
// --------------------------------------------------
.navbar-inverse {
	//height: 139px;
	border:none;
	background: none;
}
.navbar-nav {
	height: 60px;	
}

.navbar-inverse .navbar-nav > li {
	width: 85px;
	//border-left: 1px solid @product;
	a {
		text-align: center;
		padding: 0 0 3px;
		i {
			display: block;
			padding: 4px 0;
			margin-bottom: 4px;
			//border-bottom: 1px solid;
		}
		span {
			color: @sixth;
			font-size: 1.25em;
			text-transform: uppercase;
			.Miso-R;
		}
	}
	&.product {
		a {
			i {
				color: @product;				
			}
		}
		&:hover, &.active {
			a {				
				background: @product;
				i, span {
					color: @white;
				}
			}
		}
	}
	&.shop {
		a {
			i {
				color: @shop;
			}
		}
		&:hover, &.active {
			a {				
				background: @shop;
				i, span {
					color: @white;
				}
			}
		}
	}
	&.create {
		a {
			i {
				color: @create;
			}
		}
		&:hover, &.active {
			a {				
				background: @create;
				i, span {
					color: @white;
				}
			}
		}
	}
	&.services {
		a {
			i {
				color: @services;
			}
		}
		&:hover, &.active {
			a {				
				background: @services;
				i, span {					
					color: @white;
				}
			}
		}
	}
	&.social {
		a {			
			i {
				color: @social;
			}
		}
		&:hover, &.active {
			a {				
				background: @social;
				i, span {					
					color: @white;
				}
			}
		}
	}
	&.login {
		a {
			i {
				color: @login;
			}
		}
		&:hover, &.active {
			a {				
				background: @login;
				i, span {					
					color: @white;
				}
			}
		}
		.avatar {
			img {
				margin: 10px 0 10px 15px;
			}
		}
	}
} 

@media screen and (max-width: 1200px) {
	.navbar-inverse .navbar-nav > li {
	width: 74px;
		a {
			span {
				font-size: 1em;
			}
		}
	}
}

// SEARCH
// --------------------------------------------------
.searchItemField {
	padding: 15px;
	//border-left: 1px solid @product;

	.form-control {
		border-color: @product;
		color: @product;
		padding-right: 50px;
		box-shadow: none!important;
	}
	.btn-default {
		padding: 4px 10px!important;
		border-color: @product;
		background: @product;
		margin-left: -41px!important;
		i {
			color: white;
			font-size: 1.3em;
		}
		&:hover {
			background: white!important;
			i {
				color: @product!important;
			}
		}
	}
}
.ui-menu {
	position: fixed!important;
	z-index: 999!important;
}

// MAIN
// --------------------------------------------------

// SLIDE
.slide {
	margin-bottom: 0px;
	.col-md-12 {
		//width: 98%;
	}
	.container {
		position: relative;
		height: auto;
		padding-bottom: 0px;
		min-height: 0px;
		margin-bottom: 0px;
	}
	.carousel-control {
		background: @fourth!important;
		padding: 2px 28px!important;
		width: 75px;
		height: 34px;
		margin-top: 15px;
		opacity: 1;
		span {
			color: @white;
			font-size: 1.3em;
		}
	}
	.triangle {
		position: absolute;
		top: 49px;
		right: 0;
		.triangle-bottom-left (@third);
	}
	.carousel-caption {
		width: 344px;
		height: 120px;
		left: auto;
		right: -22px!important;
		top: 205px;
		
		.text {
			.boxShadow;
		}

		p {
			padding: 10px;
			margin: 0;
			font-size: 1.8em;
			color: @fourth;
			background: @product;
			text-align: left;
			.Sea-R;
		}

		.triangle {
			top: 145px;
			right: 0;
		}
	}
}

// CARRUSEL 
.allItems {
	margin: 0 0 20px 0;
	padding: 0;

	.listItems {
		overflow: hidden;
		width: 98%;
		margin: 0 auto;
	}

	ul {
		width: 2000em;
		padding: 0;		
	}

	.objContent {
		width: 255px;
		margin-right: 32px;
		float: left;
	}

	.jms-arrows {
		&-prev {
			left: -30px!important;
		}
		&-next {
			right: -30px!important;
		}
	}
}

// TITLE
.title {
	padding: 8px 12px;
	color: @white;
	margin-bottom: 20px;
	&.product {
		background: @product;
	}
	&.store {
		background: @shop;
	}
	&.login {
		background: @login;
	}
	&.community {
		background: @social;
	}
}

//ADMIN ITEM
.adminItem {
	width: 100%;
}

// ITEM-HOME
.obj {
	width: 100%;
	min-height: 305px;
	margin-bottom: 20px;	
	
	.thumb {
		width: 100%;
		height: 168px;
		overflow: hidden;
		position: relative;
		cursor: pointer;

		.image {
			width: 100%;
			height: 166px;
			background: @white;
			text-align: center;
			overflow: hidden;

			img {
				width: auto;
				height: 100%;
			}
		}

		.over {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			display: none;

			i {
				top: 50%;
				left: 50%;
				margin: -55px 0 0 -44px;
				position: absolute;
				font-size: 8em;
				color: @white;
			}
		}

		&:hover {
			.over {
				display: block;
			}
		}
	}

	.feetProduct {
		background: @product;
		width: 100%;
		padding: 5px 8px;
		z-index: 10;

		.nameCategory {
			color: @white;
			.Robo-L;
		}

		.ads {
			color: @white;
			a {
				color: @white;
				text-decoration: none;
				&:hover {
					color: @fourth!important;
				}
			}
		}
	}

	h4 {
		margin-bottom: 0;
		font-size: 1.75em;
		color: @fourth;
		.Robo-B;
	}

	p {
		height: 35px;
		line-height: 1em;
		margin-top: 4px;
		font-size: 1.1em;
		color: @fifth;
		.Robo-L;
	}

	&.product {
		.thumb {
			background: @product;
			.over {
				background: rgba(27,188,155,0.7);
			}
		}
	}
	&.store {
		.thumb {
			background: @shop;
			.over {
				background: rgba(244,166,97,0.7);
			}
		}
	}
}

.socialMedia {
	margin-bottom: 20px;
	.link {
		width: 100%;
		height: 100%;
		display: block;
		text-align: center;
		padding: 14px 0;
		text-decoration: none;
		i {
			color: @white;
			display: block;
			padding: 8px 0;
			margin-bottom: 2px;
		}
		span {
			color: @white;
			font-size: 1.55em;
			text-transform: uppercase;
			.Miso-R;
		}
		&.blog {
			background: @blog;
		}
		&.recycle {
			background: @recycle;
		}
		&.create {
			background: @create;
		}
	}
	.partners {
		padding: 0;
		.mainCarousel {
			height: 135px;
		}
	}
	.ongList {
		overflow: hidden; 
		margin-left: -25px;
		ul {
			width: 2000em;
			height: 138px;			
		}
		.ong {
			padding: 0;
			float: left;
		}
	}
}

// BLOG
// --------------------------------------------------
.blog {
	margin-top: 20px;
	h2 {
		margin: 5px 0;
		font-size: 2.2em;
		color: @social;
		.Robo-R;
	}
	h3 {
		margin-bottom: 6px;
	}
	.clr {
		margin: 10px 0;
		.Robo-L;
	}
	.btn-default {
		margin-left: -0px!important;
	}
	.searchItemField {
		
		position: relative;
		.form-control {
			border-color: @social;
			color: @social;
		}
		.btn-default {
			border-color: @social;
			background: @social;
			position: absolute;
			margin-top: 1px;
			right: 18px;
			&:hover {
				i {
					color: @social!important;
				}
			}
		}
	}
	.imgContent {
		width: 100%;
		height: 300px;
		outline: hidden;
		img {
			width: 100%;
			height: 100%;
		}
	}
	&.post {
		.imgContent {
			width: 100%;
			height: auto;
			outline: hidden;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.detail {
			font-size: 1em;
		}
	}
}

// FOOTER
// --------------------------------------------------
footer {
	//width: 100%;
	//margin-bottom: -20px;

	width: 97.4%;
	position: absolute;
	bottom: 0px;

	.row {
		&:first-child {
			height: 57px;
		}
	}
	.links {
		width: 100%;
		height: 57px;
		padding-top: 18px;
		background: @third;
		a {
			color: @second;
			&:hover {
				text-decoration: none;
			}
		}
		.company {						
			margin-left: 20px;			
			a {
				padding-right: 8px;
				font-size: 1.18em;
				.Miso-R;				
			}
		}
		.socialMedia {
			margin-right: 20px;	
			li {
				width: 30px;
				height: 30px;
				margin-left: 10px;	
				float: left;
				cursor: pointer;
				i {
					color: @second;
				}
			}		
		}
	}	
	.copyright {
		width: 100%;
		height: 80px;
		padding-top: 20px;
		background: @fourth;
		p {
			margin-right: 25px;
			text-align: right;
			font-size: 1.18em;
			color: @third;
			.Miso-R;
		}

		a {
			color: @create;
		}
	}
}

// PRODUCT CONTAINER
// --------------------------------------------------
.filter {
	margin-bottom: 20px;

	.combo {
		padding-left: 0;
		&:first-child {
			padding-right: 0;
			padding-left: 15px;
		}
		.title {
			span {
				text-transform: uppercase;
				color: @fourth;
			}
		}
	}
}

// PRODUCT DETAIL
// --------------------------------------------------
.productDetail, .marketDetail, .userProfile {
	.breadcrumb {
		border-radius: 0;
		padding: 8px 12px;
	}
	.btn-toolbar {
		.btn {
			padding: 7px 15px!important;
		}
	}

	.txtDetail {
		margin: 10px 0;
	}

	.detail {
		margin-bottom: 20px;
		h2 {
			width: 75%;
			font-size: 2.2em;
			margin: 3px 0;
			.Robo-R;
		}
		h3 {
			margin-bottom: 6px;
			span {
				color: @product;
			}
		}
		.clr {
			margin: 10px 0;
			.Robo-L;
		}
	}
	.createMarket {
		padding: 20px;
		text-align: center;
		color: @white;
		font-size: 1.2em;
		border: 1px dotted @shop;
	}
	.yourMarket {
		margin-bottom: 20px;
	}
	.comment {
		margin-bottom: 20px;

		h4 {
			display: none;
			color: @social;
			padding-bottom: 2px;
			margin-bottom: 2px;
			border-bottom: 1px solid @social;
		}
	}
}

.productDetail {
	.breadcrumb {
		background: @product;
		a {
			color: white;
		}
	}

	.pzoom {
		float: left;
		width: 410px;
		height: 270px;
		background: @gray;
	}
	
	.thumbList {
		margin-left: -20px;
		padding: 0px;
		float: left;

		li {
			width: 106px;
			height: 66px;
			overflow: hidden;
			margin-bottom: 2px;

			a {
				width: 100%;
				height: 100%;
				display: block;

				img {
					width: 100%;
					height: auto;
				}
			}
		}
	}

	.blk {
		position: absolute;
		right: 15px;
	}

	.price {
		font-size: 2.5em;
		color: @product;
		background: @white;
		border: 1px solid @product;
		margin-bottom: 5px;
		padding: 5px 20px;
		.Robo-R;
		span {
			.Robo-L;
		}
		&.without {
			font-size: 1em;
			text-align: center;
			padding: 5px 12px;
		}
	}

	.label {
		border-radius: 0px;
		margin-top: 12px;
		padding: 5px 30px;
		text-transform: uppercase;
	}

	.subtitle {
		margin: -5px 0 5px!important;
		color: @product;
		font-size: 1.2em;
		.Robo-L;
	}

	.currentMarket {
		height: auto;
		overflow: hidden;
		margin: 20px 0;

		.avatarMarket {
			width: 106px;
			height: auto;
			margin-bottom: 5px;
		}

		h3 {
			.Robo-R;
			font-size: 1.3em;
			color: @shop;
		}

		.btn-link {
			padding: 0;
			margin-left: 0px!important;
		}
	}

	.detail {
		margin-bottom: 20px;
		h2 {
			font-size: 3.2em;
			margin: 3px 0;
			color: @product;
		}
		p, .clr {
			margin: 15px 0;
		}
	}
}
.marketDetail, .userProfile {
	.breadcrumb {
		a {
			color: @shop;
		}
	}
	h4 {
		.Miso-R;
	}
	.mapCanvas {
		width: 100%;
		height: 200px!important;
		margin: 10px 0 20px;
	}

	.fancybox {
		width: 100%;

		.img- {
			width: 100%;
		}
	}
	.location {
		margin: 25px 0;
	}
}

.productCreation {
	.end {
		margin-bottom: 25px;
	}
	.col-md-3 {
		padding: 0;
	}
	label {
		font-size: 1.5em;
		.Robo-R;
		font-weight: 300;
	}
}

// COMMENT
// --------------------------------------------------
.makeComment {
	margin-bottom: 25px;
	.btn {
		margin-top: 8px;
		margin-left: 0px!important;
	}
}

.media {
	padding-bottom: 5px;
	border-bottom: 1px solid @second;

	.icon-2x {
		color: @social;
	}
}

.mustShowAnswer {
	margin: 10px 0;

	.btn-block {
		margin: 8px 0 0 0!important;
	}
}

.replies {
	margin-bottom: 10px;
	padding-top: 10px;

	.media {
		border-top: 1px solid @gray;
		border-bottom: none;
		padding-top: 10px;
	}

	.media-body {
		padding-bottom: 5px;
	}
}

// PROFILE
// --------------------------------------------------
.userProfile {
	.imgContent {
		width: 100%;		
		margin-bottom: 15px;
		&.imgMarket {
			max-height: 250px;
			text-align: center;
			overflow: hidden;

			img {
				width: 100%;
				height: auto;
			}
		}
	}
}

.nav-tabs {
	border-bottom: 1px solid @product;
	padding-bottom: 1px;

	li {
		a {
			border: none;
			border-radius: 0px!important;
			background: lighten(@second, 10%);
		}

		&.active {
			a {
				border: none!important;
				background: @product!important;
				color: @first!important;
			}
		}
	}
}

.tab-pane {
	margin-top: 20px;

	.comment {
		h4 {
			display: block!important;
		}
	}
}

.table {
	margin-top: 15px;
}

// REGISTER
// --------------------------------------------------
.register {
	h4 {
		font-size: 2em;
		margin-left: -15px;
		margin-bottom: 25px;
		.Miso-R;

		&.modal-title {
			margin-left: 0px;
			margin-bottom: 0px;
		}
	}
	.control-label {
		font-size: 1.5em;
		.Robo-L;
	}
	.checkbox {
		margin: -8px 0 20px;
		font-size: 1em;
		color: @third;
		.remember {
			margin-top: 5px;
		}
		label {
			.Robo-L;
		}
	}
	.btn-link {
		font-size: 1em;
		padding: 0;
	}
	.loadImage {
		margin-left: -1px;
	}
	.blkAvatar {
		padding: 0;
	}
	.end {
		margin-bottom: 25px;
	}
	.col-md-offset-1 {
		margin-left: 30px;
	}
	.btn-login {
		margin: 36px 0 0 0;
	}
	.log {		
		.alert {
			margin-top: -15px;
		}
	}
	.col-md-4.col-central {
		margin: 0 60px 30px 30px;
	}
}

.required {
	font-size: 1em;
	color: @create;
	vertical-align: top;
	margin-top: 4px;
	display: inline-block;
}

// PRODUCT CREATION
// --------------------------------------------------
.productCreation {
	.imgList {
		li {
			height: 180px;
			margin-bottom: 45px;
			.imgContent {
				width: 100%;
				height: 90%;
				img {
					width: auto;
					height: 100%;
					clear: both;
				}
			}
		}
	}
	.label-info {
		display: inline-block;
		margin-bottom: 5px;
		clear: both;
	}
}

// REGISTER MARKET
// --------------------------------------------------
.registerMarket {
	.inSystem {
		background: @product;
		min-height: 2px;
		max-height: 22px;
		height: auto;
		.user {
			/*
			.btn {
				padding: 10px 8px!important;
				background: #1bbc9b;
				border: none;
			}
			*/
		}
	}			
	.end {
		margin-bottom: 25px;
	}
	.label-info {
		display: inline-block;
		margin-bottom: 5px;
	}
	label {
		font-size: 1.5em;
		.Robo-R;
		font-weight: 300;
	}
}
.spinner {
	position: absolute!important;
	top: 50%;
	left: 50%;
}

// HOWTO
// --------------------------------------------------
.howTo {

	.page_container {
		height: 135px;
		margin-bottom: 40px;

		img {
			width: 15%!important;
			height: auto;
			float: left;
			margin-right: 35px;
		}

		h1 {
			color: @product;
			padding-top: 25px;
		}
		/*&:after { 
			position:absolute;
		    content: " ";
		    width: 20%;
			height: 1px;
			top: 150px;
			left: 50%;
			margin-left: -10%;
		    background-color: @product;
		}*/		
	}
	
	.page_1, .page_2, .page_3, .page_4, .page_5 {
		width: 97%;
		border: 1px dotted @product;
		padding: 15px 30px;
		margin: 10px auto;
	}
		
}

// MODAL
// --------------------------------------------------
.modal {
	
	.modal-content {
		border-radius: 0px;
		box-shadow: 0 2px 1px rgba(0,0,0,.5);
		background-color: #f5f5f5;
	}

	.close {
		display: none;
	}
	.productName {
		color: @product;
	}
	.marketName {
		color: @shop;
	}
	.modal-title {
		font-size: 2.2em;
		color: @fourth;
		.Miso-R;
	}
	.text {
		font-size: 1.6em;
	}
	h3 {
		font-size: 2em;
	}
	p {
		font-size: 1.4em;
	}
	#map-canvas {
		width: 100%;
		height: 150px;
		margin: 10px 0 20px;
	}

	.modal-footer {
		display: table;
		width: 100%;
		text-align: center;
		padding: 0;
		
		.btn {
			display: table-cell;
			background: none;
			border-radius: 0px!important;
			border: none;
			text-align: center;
			padding: 20px 0!important;
			margin: 0;
			border-left: 1px solid #e5e5e5;
			color: @fourth;
			font-size: 1.3em;

			&:first-child {
				border-left: none;
			}	

			&:hover {
				color: @product;
			}
		}

		.btn-group {
			display: row!important;
			width: 100%;
			text-align: center;

			&.amount-{
				&1 {
					.btn {
						width: 100%;
					}			
				}
				&2 {
					.btn {
						width: 49%;
					}			
				}
				&3 {
					.btn {
						width: 32%;
					}			
				}
			}
		}		
	}
	&.successRegistration {
		.text {
			position: relative;
			.iconSuccess {
				width: 75px;
				height: 75px;
				background: url('@{image}check.png') 0 0 no-repeat;
				position: absolute;
				right: 0;
				top: -10px;
				display: block; 
			}
		}
	}
}
	